import React, { FC, useEffect, useState } from 'react'
import styles from './home.module.scss'
import EditCanvas from '../edit/EditCanvas'
import '../../../_mock/index'
import axios from 'axios'
import LeftPanel from '../edit/LeftPanel'
import RightPanel from '../edit/RightPanel'
import { useDispatch, useSelector } from 'react-redux'
import { resetComponents, changeSelectedId } from '../../../store/componentReducer'
import EditHeader from '../edit/EditHeader'

const Question: FC = () => {
  const [list, setList] = useState([])
  //   useEffect(() => {
  //     // fetch("/api/test")
  //     // //   .then((res) => res.json())
  //     //   .then((res) => {
  //     //     console.log(res);
  //     //   });
  //     axios.get("/api/qustion").then((res) => {
  //       console.log(res.data.data);
  //     });
  //   }, []);
  const dispatch = useDispatch()
  useEffect(() => {
    getData()
  }, [])

  const getData = () => {
    axios.get('/api/qustion').then(res => {
      setList(res.data.data)
    })
  }
  useEffect(() => {
    const { componentList } = list
    dispatch(resetComponents({ componentList, selectedId: '' }))
  }, [list])

  function clearSelectId() {
    dispatch(changeSelectedId(''))
  }
  return (
    <div className={styles.container}>
      <div style={{ backgroundColor: '#fff', height: '60px' }}>
        <EditHeader></EditHeader>
      </div>
      <div className={styles['content-wrapper']}>
        <div className={styles.content}>
          <div className={styles.left}>
            {/* //左侧 */}
            <LeftPanel></LeftPanel>
          </div>
          <div
            className={styles.main}
            onClick={() => {
              clearSelectId()
            }}
          >
            <div className={styles['canvas-wrapper']}>
              <EditCanvas></EditCanvas>
            </div>
          </div>
          <div className={styles.right}>
            <RightPanel></RightPanel>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Question
